import 'lib-flexible';
import $ from 'jquery';
import './style/index.less';
import FILE from './js/file.js';

$(() => {
  $.fn.extend({
    animateCss: function (animationName, cb = () => { }) {
      var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      this.addClass('animated ' + animationName).one(animationEnd, function () {
        $(this).removeClass('animated ' + animationName);
        cb($(this));
      });
      return this;
    }
  });

  let app = (function ($) {
    let elMap;
    let initElMap, initElAttr, init;
    let startAnimation, initLights;

    initElMap = () => {
      elMap = {
        root: $('.root'),
        start: $('.start'),
        am_clouds: $('.am_item.cloud'),
        am_car_1: $('.am_item.car_1'),
        am_car_2: $('.am_item.car_2'),
        am_people_1: $('.am_item.people_1'),
        am_people_2: $('.am_item.people_2'),
        am_people_3: $('.am_item.people_3'),
        am_lights: $('.am_item.lights'),
        nav_build_img: $('.nav_item.build img'),
        nav_handle_img: $('.nav_item.handle img'),
        nav_fx_img: $('.nav_item.fx img'),
      }
    };

    initElAttr = () => {
      elMap.am_clouds.attr('src', FILE.img.am_cloud);
      elMap.am_car_1.attr('src', FILE.img.am_car_1);
      elMap.am_car_2.attr('src', FILE.img.am_car_2);
      elMap.am_people_1.attr('src', FILE.img.am_people_1);
      elMap.am_people_2.attr('src', FILE.img.am_people_2);
      elMap.am_people_3.attr('src', FILE.img.am_people_3);
      elMap.am_lights.attr('src', FILE.img.am_lights[0]);
      elMap.nav_build_img.attr('src', FILE.img.dang);
      elMap.nav_handle_img.attr('src', FILE.img.zhang);
      elMap.nav_fx_img.attr('src', FILE.img.xin);
    }

    initLights = () => {
      const RED = 0,
        YELLOW = 1,
        GREEN = 2;
      let currentState = RED;

      const change = (state, time) => {
        return new Promise((resolve, reject) => {
          render(state)
          setTimeout(() => {
            resolve()
          }, time)
        })
      }

      async function loop() {
        await change(RED, 3000)
        await change(GREEN, 7000)
      }

      loop()

      setInterval(() => {
        loop()
      }, 10000)

      // setInterval(() => {
      //   render(RED);
      //   setTimeout(() => {
      //     render(GREEN)
      //   }, 1000)
      // }, 10000)

      // setInterval(() => {
      //   render(currentState);
      //   currentState = currentState + 1 == 3 ? 0 : currentState + 1;
      // }, 10000);

      function render(state) {
        elMap.am_lights.attr('src', FILE.img.am_lights[state]);
      }
    }

    startAnimation = () => {
      setTimeout(() => {
        $('.start .logo').addClass('rotate');
        $('.start .name').animateCss('wobble', (name) => {
          $('.start .logo').fadeOut(2000);
          name.slideUp(2000);
          elMap.root.addClass('show');
        });
      }, 500)
    }

    init = () => {
      initElMap();
      initElAttr();
      startAnimation();
      initLights();
    };

    return {
      init
    }
  }($))

  app.init();
});